<!--
 * @Author: AllenYe
 * @Date: 2021-04-18 09:33:00
 * @LastEditors: AllenYe
 * @LastEditTime: 2021-04-18 15:20:45
 * @Description: file content
-->
<template>
  <div ref="foo3">
      <h2>组件通信</h2>
      <!-- refs获取子节点引用 -->
      <child1 @pushData="pushData" ref="foo1" @click="onclick"/>
      <!-- $attrs/$listeners -->
      <child2 :foo="dataFoo" ref="foo2"/>
  </div>
</template>

<script>
import Child1 from './child1.vue'
import Child2 from './child2.vue'
export default {
    data(){
        return{
            dataFoo:'attrs的使用'
        }
    },
    components:{
        Child1,
        Child2
    },
    methods: {
        pushData(val){
            console.log('child1 pushData',val)
        },
        onclick(){
            console.log('来自老爹的回调函数处理',this)
        }
    },
    mounted() {
        // children
        // 父组件可以通过$children访问子组件实现父子通信。
        // 注意：$children不能保证子元素顺序
        console.log('this.$children',this.$children[0].name)

        // 获取子节点引用
        console.log('this.$refs',this.$refs.foo1)
    },
}
</script>

<style>

</style>
